'use client';

import { useState, useEffect } from 'react';
import Image from 'next/image';
import Link from 'next/link';

interface CarouselItem {
  id: string;
  title: string;
  imageUrl: string;
  link: string;
}

// 模拟数据，实际项目中应该从API获取
const mockData: CarouselItem[] = [
  {
    id: '1',
    title: '重要新闻一',
    imageUrl: 'https://picsum.photos/1200/400?random=1',
    link: '/news/1',
  },
  {
    id: '2',
    title: '重要新闻二',
    imageUrl: 'https://picsum.photos/1200/400?random=2',
    link: '/news/2',
  },
  {
    id: '3',
    title: '重要新闻三',
    imageUrl: 'https://picsum.photos/1200/400?random=3',
    link: '/news/3',
  },
];

export function Carousel() {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentIndex((prev) => (prev + 1) % mockData.length);
    }, 5000);

    return () => clearInterval(timer);
  }, []);

  return (
    <div className="relative w-full h-[400px] overflow-hidden rounded-lg mb-8">
      {mockData.map((item, index) => (
        <Link
          key={item.id}
          href={item.link}
          className={`absolute w-full h-full transition-opacity duration-500 ${index === currentIndex ? 'opacity-100' : 'opacity-0'}`}
        >
          <Image src={item.imageUrl} alt={item.title} fill className="object-cover" />
          <div className="absolute bottom-0 w-full bg-gradient-to-t from-black/60 to-transparent p-4">
            <h3 className="text-white text-xl font-bold">{item.title}</h3>
          </div>
        </Link>
      ))}

      <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex gap-2">
        {mockData.map((_, index) => (
          <button
            key={index}
            className={`w-2 h-2 rounded-full ${index === currentIndex ? 'bg-white' : 'bg-white/50'}`}
            onClick={() => setCurrentIndex(index)}
          />
        ))}
      </div>
    </div>
  );
}
